<template>
	<view class="scenceIndex">
		<!-- 	<view class="concern">


		<view class="concernLeft">
			<image src="../../static/img/s3.png" style="width: 200upx;height: 180upx;" class="hotelImg"></image>
		</view>
		<view class="concernRight">
			<text class="hoteltxt">热门酒店热门酒店热门酒店热门酒店热门酒店热门酒店热门酒店热门酒店热门酒店热门酒店热门酒店热门酒店热门酒店</text>
			<text class="concernNum">5.4人收藏</text>
		</view>
		
	</view> -->

		<!-- 		<view id="cover"  @click="isCover" v-if="isShow">
					<view class="changeCityList">
					<text class="changeCityListItem" v-for="item in changeCityList" @click="selectCity(item.name)">
							{{item.name}}
					</text>
			</view>
		</view> -->


		<!-- 		<view class="scenceIndexSearch">
				<view class="">
					<image src="../../static/img/icon_home_search.png" style="width: 30upx;height: 32upx;position: absolute;top: 60upx;left: 64upx;" class=""></image>
						<input class="uni-input SearchInput" v-model="searchCityName" placeholder="" />
						<text class="" style="position: absolute;top: 60upx;right: 70upx;color: #2B91E2;z-index: 22;" @click="searchCity">搜索</text>
				</view>

		</view> -->
		<!-- 		<view class="">
			<view class="cityListTitle">
					当季推荐
			</view>
			<view class="cityList">
				<view class="cityListItem" v-for="item in cityList">
					<image :src="item.variousImg" style="width: 700upx;height: 400upx;" class="noDataImg"></image>
					<view class="cityListItemBom">
						<view class="cityListItemName">
								{{item.variousName}}
						</view>
					</view>
				</view>
			</view>
		</view> -->
		<view class="">
			<view class="fz15 h-c tab-wrapper" v-bind:style="{backgroundImage:'url(' + bgSrc + ')'}">
				<view class="inline-block tab" :class="tabVal == 0 ? 'active' : ''" @click="changetab(0)">精选特产</view>
				<view class="inline-block tab" :class="tabVal == 1 ? 'active' : ''" @click="changetab(1)">文创产品</view>
				<image :src=imgSrc style="height: 285upx;position: absolute;top: 120upx;left: 64upx;" class=""></image>
			</view>
			<view class="guessLike">
				<view class="guessLikeTip">
					猜你喜欢
				</view>
				<view class="guessLikeBox" :class="{ 'backgroundA': isfir, 'backgroundB': issec}">
					<view class="" style="font-size: 30upx;font-weight: bold;margin: 10upx;padding-top: 20upx;" :class="{ 'colorA': isfir, 'colorB': issec}">
						热销产品榜
					</view>
					<view class="" style="font-size: 26upx;margin: 10upx;" :class="{ 'colorA': isfir, 'colorB': issec}">
						最受欢迎人气排行
					</view>
					<view class="populartList">
						<view class="populartListItem" v-for="(item,index) in sortList">

							<image src='../../static/img/icon_first.png' v-if="index == 0" style="height: 100upx;width: 100upx;position: absolute;top: 0;left: 0;z-index: 1;"
							 class=""></image>
							<image src='../../static/img/icon_second.png' v-if="index == 1" style="height: 100upx;width: 100upx;position: absolute;top: 0;left: 0;z-index: 1;"
							 class=""></image>
							<image src='../../static/img/icon_third.png' v-if="index == 2" style="height: 100upx;width: 100upx;position: absolute;top: 0;left: 0;z-index: 1;"
							 class=""></image>
							<view class="populartListItemImg">
								<image :src="item.mainImage" style="height: 150upx;width: 150upx;" class=""></image>
								<view class="" style="text-overflow:ellipsis;overflow:hidden;width: 150upx;white-space: nowrap;">
									{{item.goodsName}}
								</view>
							</view>
						</view>
						<!-- <image :src=imgSrc style="height: 50upx;" class=""></image> -->
					</view>
				</view>
			</view>
			<view class="sortList" v-for="item in sortList">
				<view class="sortListLeft">
					<image class="img" :src="item.mainImage" style="width: 250upx;height: 200upx;margin: 20upx;;"></image>
				</view>
				<view class="sortListRight">
					<view class="sortListItemName">
						{{item.goodsName}}
					</view>
					<!-- 						<view class="sortListItemName">
							{{item.businessLabel}}
						</view> -->
					<!-- 						<view class="deliciousListTag">
							<view class="deliciousListTagItem" v-for="(child, _index1) in item.businessLabel" v-if="child != ''" :key="_index1">
								{{child}}
							</view>
						</view> -->
					<view class="sortListItemNum">
						<text class="">
							<text class="fs-15">￥</text>
							{{item.goodsDetailVo[0].goodsPrice}}
							</text>
					</view>

					<!-- 						<view class="sortListItemAdr">
							<text class="" style="font-size: 30upx;font-weight: bold;">推荐餐厅:</text>
							{{item.ownRestaurantName}}
						</view> -->
				</view>

			</view>
			<view class="fz14 tc h-8 signtips">{{tips}}</view>
		</view>
	</view>
</template>

<script>
	import Header from '@/components/header.vue'
	export default {
		// 		onLoad: function(option) {
		// 			console.log(option, '==========');
		// 			this.parentDate = JSON.parse(option.item)
		// 		},
		data() {
			return {
				parentDate: '',
				tabVal: 0,
				page: 1,
				categoryId: 10001,
				tips: '正在加载...',
				isOnReachBottom: false,
				sortList: [],
				cityList: [],
				changeCityList: [],
				searchCityName: '',
				isShow: false,
				isfir: true,
				issec: false,
				imgSrc: '../../static/img/bg-techan.png',
				// bgSrc:'../../static/img/bg-techan.png',
				// bgSrc: require('../../static/img/bg_shopping_banner0.png'),
			}
		},
		components: {
			Header
		},

		onShow() {
			// this.getSort();
			this.getData()
		},
		onReachBottom: function() {
			this.page++
			if (this.isOnReachBottom) {
				this.changetab(this.tabVal, true)
			}
		},
		methods: {
			// 			searchCity(){
			// 				console.log('0000')
			// 				this.getData()
			// 			},
			// 			isCover(){
			// 				this.isShow = false;
			// 			},
			// 			selectCity(name){
			// 				console.log(name)
			// 				this.parentDate.name = name;
			// 				this.getData();
			// 				this.isShow = false;
			// 				document.body.style.overflow="auto";
			// 			},
			// 			changeCity(){
			// 				this.isShow = true;
			// 				document.body.style.overflow="hidden";
			// 				console.log(this.isShow)
			// 				this.getCity()
			// 			},
			//获取数据
			// 			getCity() {
			// 				this.$postApi(this.$path.GET_CITY_LIST, {
			// 					parentId: "14000",
			// 				}).then(data => {
			// 					if (data.data.success) {
			// 						this.changeCityList = data.data.reListData;
			// 					}
			// 				})
			// 			},
			//获取数据
			getData() {
				this.$postApi(this.$path.GET_GOODS_BY_CATEGORY_ID, {
					categoryId: this.categoryId,
					page: this.page,
					rows: 8,
				}).then(data => {
					if (data.data.success) {
						console.log(data, '1110001')
						if (data.data.rows.length !== 0) {
							for (let i = 0; i < data.data.rows.length; i++) {
								data.data.rows[i].mainImage = "https://sz.smates.cn/onlineRetailers/goods/showImg?img=" + data.data.rows[i].mainImage;
							}
							if (this.page == 1) {
								this.sortList = []
							}
							this.tips = ''
							this.isOnReachBottom = true
							this.sortList = this.sortList.concat(data.data.rows)
						} else {
							this.tips = '没有更多数据了'
							this.isOnReachBottom = false
						}
						// this.sortList = data.data.rows
						// 						for (let i = 0; i < data.data.rows.length; i++) {
						// 							// data.data.rows[i].img = this.pub.fmtImgUrl(data.data.rows[i].img);
						// 							data.data.rows[i].businessLabel = data.data.rows[i].businessLabel.split("；");
						// 						}
					}
				})
			},
			//获取数据
			// 			getSort() {
			// 				this.$postApi(this.$path.QUERY_SHOW_CHILD_INFO,{positionId:9}).then(data => {
			// 					if (data.data.success) {
			// 						console.log(data,'22')
			// 						
			// // 						for (let i = 0; i < data.data.items.length; i++) {
			// // 							// data.data.rows[i].img = this.pub.fmtImgUrl(data.data.rows[i].img);
			// // 							data.data.items[i].promptLabel = data.data.items[i].promptLabel.split("；");
			// // 						}
			// 						this.cityList = data.data.items
			// 						// this.sortList = data.data.rows
			// 					}
			// 				})
			// 			},
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			changetab(val, isPush) {
				if (!isPush) {
					this.tabVal = val
					this.page = 1
				}
				if (val == 0) {
					this.categoryId = 10001
					this.imgSrc = '../../static/img/bg-techan.png';
					this.bgSrc = "";
					// this.bgSrc = require('../../static/img/bg_shopping_banner0.png')
					this.isfir = true;
					this.issec = false;
				} else {
					this.imgSrc = '../../static/img/bg-wenchuang.png';
					this.bgSrc = "";
					// this.bgSrc = require('../../static/img/bg_shopping_banner1.png')
					this.categoryId = 10004
					this.isfir = false;
					this.issec = true;
				}
				this.getData()
				// 				switch (this.tabVal) {
				// 					case 0:
				// 						this.searchSpotByC()
				// 						break;
				// 					case 1:
				// 						this.searchHotelByC()
				// 						break;
				// 					case 2:
				// 						this.getOrderList()
				// 						break;
				// 					default:
				// 						break;
				// 				}
			},

		}
	}
</script>

<style lang="scss" scoped>
	.guessLike {
		margin-top: 80upx;
		width: 100%;

		.guessLikeTip {
			font-size: 36upx;
			font-weight: bold;
			text-align: center;
		}

		.guessLikeBox {
			margin: 10upx;
			margin-top: 30upx;

			.populartList {
				display: flex;
				justify-content: space-around;
				padding-bottom: 20upx;

				.populartListItem {
					position: relative;
					width: 210upx;
					height: 272upx;
					background: rgba(255, 255, 255, 1);
					border-radius: 16px;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}

	.backgroundA {
		background: #FFB415;
	}

	.backgroundB {
		background: #47B0D0;
	}

	.colorA {
		color: #8D5F01;
	}

	.colorB {
		color: #1F6F86;
	}

	.sortList {
		display: flex;
		width: 100%;
		padding: 34upx;
		border-bottom: 1px solid #cccccc;

		.sortListRight {
			width: 100%
		}

		.sortListItemName {
			font-size: 36upx;
			font-weight: bold;
			margin: 10upx;
		}

		.sortListItemNum {
			// font-weight: bold;
			color: #FE5A34;
			margin: 10upx;
			margin-top: 80upx;
		}

		.sortListItemAdr {
			margin: 10upx 10upx 20upx 10upx;
		}

		.sortListItemTicket {
			margin: 10upx;
			padding-top: 20upx;
			border-top: 1upx dashed #cccccc;
			display: flex;
			justify-content: space-between;

			.sortListItemTicketPrice {
				color: #FE5A34;
			}
		}
	}

	.tab-wrapper {
		display: flex;
		justify-content: space-around;
		padding: 20upx 40upx;
		height: 371upx;

		// padding-bottom: 30upx;
		// border-bottom: 1upx solid #e6e6e6;
		.tab {
			color: white;
			font-weight: bold;
			padding-bottom: 12upx;
			border-bottom: 4upx solid transparent;
			height: 60upx;

			&.active {
				border-bottom-color: #2B91E2;
			}
		}
	}
</style>
